<template>
  <div id="unit" class="flex-row">
    <mulitinfo :data="row" :card-data="$refs.list.cardInfo" v-ref:info v-if="row"></mulitinfo>
    <div class="flex" style="flex: 1">
      <user-list v-ref:list excelurl="rs/excel/report/testexcel/测试模板"  @select-oper="showWork"  @select-changed="selected"
      @bulk-oper="showBulkWork" :component-name="comps ? comps.name : ''"  :row="row" :no-read="noRead" :no-batch="noBatch" :no-charge="noCharge"></user-list>
      <div v-show="comps" v-el:route class="span select-overspread" style="margin-top: 10px;border: 1px solid #EEF3F6;flex: 0.8;">
        <route  v-ref:route></route>
      </div>
    </div>
    <card-list :btns="operatebtn" :userinfoid="row ? row.f_userinfo_id : ''" @list-select-oper="recordCancel" v-ref:card></card-list>
  </div>
</template>
<script>
// import cardlisten from '../../plugins/CardListen'

export default {
  title: '用户操作',
  data () {
    return {
      comps: null,
      row: null
    }
  },
  props: {
    defbtn: {
      type: String
    },
    noRead: {
      type: Boolean,
      default: false
    },
    noBatch: {
      type: Boolean,
      default: false
    },
    noCharge: {
      type: Boolean,
      default: false
    }
  },
  methods: {
    selected (obj) {
      this.row = obj.val
      if (this.$refs.list.cardInfo) {
        this.row.cardInfo = this.$refs.list.cardInfo
        console.log(this.row.cardInfo)
        this.defbtn = '收费'
      }
      // this.comps = null
      // 如果有批量操作，清除批量操作的业务界面
      if (this.$refs.list.bulkType) {
        this.comps = null
      }
      if (this.defbtn === '发卡售气') {
        if (this.row.f_whether_hairpin === '未发') {
          this.showWork('发卡售气', 'show-card-sell-gas', this.row)
        } else {
          this.comps = null
        }
      } else if (this.defbtn === '收费' && this.row.f_states !== '停用') {
        console.log(this.row.f_meter_type)
        if (this.row.f_meter_type.includes('卡表')) {
          // 如果未发卡，不能弹出业务界面
          if (this.row.f_whether_hairpin === '已发' && this.$refs.list.cardInfo.CardID === this.row.f_card_id) {
            // this.componentName = '卡表收费'
            this.$refs.list.cardInfo.Gas > 0 || this.$refs.list.cardInfo.Money >0 ? this.showWork('购气撤销', 'card-meter-charge-cancel', this.row) : this.showWork('卡表收费', 'card-meter-center', this.row)
          } else {
            this.comps = null
          }
        } else {
          // this.componentName = '机表收费'
          // this.comps = {name: 'machine-charge', props: {row: this.row}}
          this.showWork('机表收费', 'machine-charge', this.row)
        }
      } else if (this.defbtn === '表具启用') {
        // this.componentName = '表具启用'
        // this.comps = {name: 'show-card-sell-gas', props: {row: this.row}}
        this.showWork('表具启用', 'enable-manage', this.row)
      } else if (this.defbtn === '补卡管理') {
        // this.componentName = '补卡管理'
        // this.comps = {name: 'replace-card-manage', props: {row: this.row}}
        this.showWork('补卡管理', 'replace-card-manage', this.row)
      } else if (this.defbtn === '换表管理') {
        // this.componentName = '换表管理'
        // this.comps = {name: 'change-meter', props: {row: this.row}}
        this.showWork('换表管理', 'change-meter', this.row)
      } else if (this.defbtn === '过户管理') {
        // this.componentName = '过户管理'
        // this.comps = {name: 'transfer-manage', props: {row: this.row}}
        this.showWork('过户管理', 'transfer-manage', this.row)
      } else if (this.defbtn === '表具停用') {
        // this.componentName = '表具停用'
        // this.comps = {name: 'disable-manage', props: {row: this.row}}
        this.showWork('表具停用', 'disable-manage', this.row)
      } else if (this.defbtn === '购气撤销') {
        // this.componentName = '表具停用'
        // this.comps = {name: 'disable-manage', props: {row: this.row}}
        this.showWork('购气撤销', 'card-meter-charge-cancel', this.row)
      }
    },
    showWork (title, name, row) {
      this.$els.route.style.height = 350 + 'px'
      this.row = row
      this.comps = {name: name, props: {row: row}}
      this.$refs.route.init(name, {row: row})
    },
    // 只针对批量操作
    showBulkWork (title, name, data) {
      this.$els.route.style.height = 260 + 'px'
      // 清除row的选择
      this.row = null
      this.comps = {name: name, props: {data: data}}
      this.$refs.route.init(name, {data: data})
    },
    // 操作记录点击撤销时间调用方法
    recordCancel (title, name, row) {
      this.$refs.list.bulkType = '操作记录撤销'
      this.$els.route.style.height = 260 + 'px'
      // 清除row的选择
      this.row = null
      // this.$refs.list.search()
      this.comps = {name: name, props: {data: row}}
      this.$refs.route.init(name, {data: row})
    },
    clean () {
      this.comps = null
      this.row = null
      // this.$refs.list.clean()
      this.$refs.route.init(null)
    }
  },
  events: {
    'error' (name, row, res) {
      this.clean()
    },
    'success' (name, row, res) {
      if (name === '发卡售气') {
        this.clean()
        this.$refs.list.search()
        // this.$refs.card.search()
        this.$refs.list.toNext(this.index)
      } if (name === '收费撤销') {
        this.clean()
        this.$refs.list.search()
        // this.$refs.card.search()
        // this.defbtn = null
      } if (name === '补卡管理') {
        // this.defbtn = null
        this.clean()
        this.$refs.list.search()
        // this.$refs.card.search()
        // this.defbtn = null
      } else {
        this.clean()
        this.$refs.list.search()
        // this.$refs.card.search()
      }
      this.$refs.card.search()
      this.$refs.info.$refs.recordstoryinfo.getdata()
    },
    'clean' (row) {
      // this.$refs.list.singleRefresh(row)
      this.clean()
    },
    'refresh' () {
      this.clean()
      this.$refs.list.search()
      this.$refs.card.search()
    },
    'refreshrow' (val) {
      this.$refs.list.refreshRow(val)
      this.$refs.card.search()
    },
    'cancelclean' (row) {
      this.row = null
      this.$refs.list.search()
      this.$refs.card.search()
    }
  }
}
</script>
